<template>
    <van-nav-bar title="商品详情页" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-image width="100%" height="300" :src="productData.productImage.replace('/profile','http://www.hshp.com')" />
    <div style="color: red; margin-top: 10px;"><em>￥</em><span style="font-size: 28px; font-weight: 800;">{{
            productData.productSalePrice }}</span>.00
    </div>
    <!--商品名字-->
    <div>{{ productData.productName }}</div>

    <div style="background-color: #f9f9f6; height: 35px; margin-top: 20px;">
        <!-- 两端对齐 -->
        <van-row justify="space-between">
            <van-col span="7">
                <van-icon name="share-o" />
                <span>转发</span>
            </van-col>
            <van-col span="7">
                <van-icon name="star-o" />
                <span>收藏</span>
            </van-col>
            <van-col span="7">
                <van-icon name="hot-sale-o" />
                <span>降价</span>
            </van-col>
        </van-row>
    </div>
    <hr>
    <div>
        商品介绍
        <img :src="productData.productImage.replace('/profile', 'http://www.hshp.com')" alt="" width="100%" >
    </div>
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
    </van-action-bar>

</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getProduct } from '@/api/product/product'
import { useRoute } from 'vue-router';
const route = useRoute();
const onClickLeft = () => history.back();

const id = ref()
//渲染 页面加载的时候立即渲染数据
onMounted(() => { 
    console.log(route.query.id);
    id.value = route.query.id;
    callProductApi()
})

// 对象定义
const productData = reactive({
    productName: '',
    productSalePrice: 0,
    productImage: '',
    productIntroduction:''
})

const callProductApi = () => { 
    getProduct(id.value).then(res => {
        console.log(res);
        productData.productName = res.data.productName;
        productData.productSalePrice = res.data.productSalePrice;
        productData.productImage = res.data.productImage;
        productData.productIntroduction = res.data.productIntroduction;
        

})
}
const onClickIcon = () => { 
    console.log('点击图标');
    
};
const onClickButton = () => { 
    console.log('点击按钮');
} 

</script>

<style lang="scss" scoped>

</style>